<template>
	<view class="user-box flex a-i-c j-c-b" :style="{background}">
		<view class="left flex a-i-c">
			<view class="avatar">
				<image class="image" :src="item.show_user.avatar" mode="" @click="go"></image>
				<view class="is-live" v-if="item.show_user.live">
					<view class="ready-live-box all-center">
						<view class="line-item" style="margin-right: 2rpx;"></view>
						<view class="line-item" style="margin-right: 2rpx;"></view>
						<view class="line-item"></view>
					</view>
				</view>
			</view>
			<view class="f-s-30 f-w-b">
				{{ item.show_user.nickname }}
			</view>
		</view>
		<view class="right flex a-i-c">
				<!-- <view class="btn1 all-center color-fff f-s-30">
					回关
				</view> -->
				<!-- <view class="btn2 all-center f-s-30">
					互相关注
				</view>
				<view class="btn2 all-center f-s-30">
					取消关注
				</view> -->
				<!-- <view class="btn2 all-center f-s-30">
					进店铺
				</view> -->
				<view class="btn3 all-center f-s-30" v-if="item.actions.live_link" @click="inviteLink">
					<image class="link-icon" src="@/static/live/white-link-icon.svg" mode=""></image>
					连线
				</view>
			<view class="config-btna" v-if="isShowAct(item)">
				<image class="config-btn" @click.stop="showConfigBox" src="@/static/images/circle/set-icon.svg" mode=""></image>
				<view class="config-box" :style="{display:show_config?'block':'none',background:configBackground, }">
					<block v-for="(it, k) in item.actions" :key="k" >
						<view class="f-s-26 color-fff l-h-36 btn-item" v-if="it" @click.stop="dodo(k)">
							{{getCName(k)}}
						</view>
						<!-- <view class="f-s-26 color-fff l-h-36">
							取消关注
						</view> -->
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {goTo} from "@/nav.js"
	export default {
		name:"user-box",
		props:{
			item:{
				type:Object,
				default:{}
			},
			background:{
				type:String,
				default:"#FFFFFF"
			},
			buttonType:{
				type:String,
				default:"link"
			},
			shopButton:{
				type:Boolean,
				default(){
					return true
				}
			},
			isLive:{
				type:Boolean,
				default(){
					return false
				}
			},
			configBackground:{
				type:String,
				default:"rgba(0,0,0,0.7)"
			}
		},
		data() {
			return {
				show_config:false
			};
		},
		methods:{
			goTo,
			isShowAct(item) {
				let  actions = item.actions
				for (let k in actions) {

					if (item.actions[k] && k != 'live_link') return true

				}
				return false
			},

			getCName(key) {
				let cname_arr = {
					follow:'关注用户',
					remove_follow:'取消关注',
					remove_fans:'移除粉丝'
				}
				return cname_arr[key]
			},
			showConfigBox(){
				this.show_config = !this.show_config
			},
			inviteLink() {
				//邀请连线 
				// 1请求接口 -- 判断是否有直播权限 -- 判断目标用户是否连接IM服务
				uni.showToast({
				  title: '功能开发中',
				  icon: 'none',
				})
			},
			submitClick(){
				
			},

			dodo(k) {
				this.show_config = false
				switch(k) {
					case 'remove_follow':
					case 'follow':

						if (k == 'remove_follow') {
							uni.showModal({  
							title: '提示',  
							content: `是否取消关注[${this.item.show_user.nickname}]`,
							success: (res)=>{  
								if (res.confirm) {
									this.follow(k)
								} else if (res.cancel) {  
									console.log('用户点击取消')
								}  
							}
							})
							return
						}

						this.follow()
					break;
					case 'remove_fans':
						uni.showModal({  
							title: '提示',  
							content: `是否移除[${this.item.show_user.nickname}]`,
							success: (res)=>{  
								if (res.confirm) {
									this.remove_fans()
								} else if (res.cancel) {  
									console.log('用户点击取消')
								}  
							}
						})
						
					break;
				}
			},

			follow(k) {
				let that = this
				that.util.getRequest({
					url:"v1/user/follow",
					data:{
						follow_user_id:that.item.show_user.id
					}
				}).then(res => {
					uni.showToast({
						icon:'none',
						title: res.msg
					})
					if (k == 'remove_follow') uni.$emit('fans_follow_el_act',{act:'follow',user_id:that.item.show_user.id})
					
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title: err.msg
					})
				})
			},

			remove_fans() {
				let that = this
				that.util.getRequest({
					url:"v1/user/remove_fans",
					data:{
						fans_id:that.item.show_user.id
					}
				}).then(res => {
					console.log(res)
					uni.showToast({
						icon:'none',
						title: res.msg
					})
					uni.$emit('fans_follow_el_act',{act:'fans',user_id:that.item.show_user.id})
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title: err.msg
					})
				})
			},
			go() {
				console.log(this.item)
				let user = this.item.show_user
				if (user.live && user.live.state) {

				} else {
					goTo({url:'/pages/live/myLiveCenter?user_id=' + user.id})
				}
				//TODO 判断是否开播
				// if (this.item)
				//TODO 这里去获取一下直播状态直接跳进去
			}
		}
	} 
</script>

<style lang="scss" scoped>
	.show{
		opacity: 0;
	}
	.user-box{
		width: 100%;
		padding: 34upx 10upx;
		background: #FFFFFF;
		border-radius: 20upx;
		.right{
			.config-btna{
				position: relative;
				.config-btn{
					width: 48upx;
					height: 48upx;
					margin-left: 40upx;
				}
				.config-box{
					position: absolute;
					min-height: 78upx;
					width: 146upx;
					right: 0;
					border-radius: 12upx;
					margin-top: 26rpx;
					padding: 10upx 20upx;
					transition: all .1s ease-out;
					.btn-item{
						margin: 10upx 0;
					}
					&::before{
						content: " ";
						width: 0;
						height: 0;
						border-left: 16upx solid transparent;
						border-right: 16upx solid transparent;
						border-top: 16upx solid transparent;
						border-bottom: 16upx solid rgba(0,0,0,0.7);
						position: absolute;
						top: -30upx;
						right: 20upx;
					}
				}
			}
			
			.btn1{
				background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
				width: 156upx;
				height: 72upx;
				border-radius: 112upx;
			}
			.btn2{
				color: #191B25;
				background: #f3f3f4;
				width: 156upx;
				height: 72upx;
				border-radius: 4upx;
			}
			.btn3{
				color: #FFF;
				background: linear-gradient(78.2deg, #910BFB 0%, #1E0BFB 100%);
				width: 156upx;
				height: 72upx;
				border-radius: 112upx;
				.link-icon{
					width: 40upx;
					height: 40upx;
					margin-right: 14upx;
				}
			}
		}
		.left{
			.avatar{
				width: 104upx;
				height: 104upx;
				margin-right: 36upx;
				position: relative;
				border-radius: 50%;
				background: #FFFFFF;
				.image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.is-live{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4upx solid #EE8300;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					.ready-live-box{
						position: absolute;
						right: 0;
						bottom: 0;
						width: 24upx;
						height: 24upx;
						background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
						border-radius: 50%;
						.line-item{
							width: 2upx;
							border-radius: 4upx;
							background: #FFFFFF;
						}
						.line-item:nth-child(1){
							height: 12upx;
							animation: line 1s ease-out infinite;
						}
						.line-item:nth-child(2){
							height: 6upx;
							animation: line 1s ease-out infinite;
						}
						.line-item:nth-child(3){
							height: 10upx;
							animation: line 1s ease-out infinite;
						}
					}
				}
			}
		}
	}
	@keyframes line {
		 0% {
		    transform: scaleY(0); /* 初始状态为无高度 */
		  }
		  50% {
		    transform: scaleY(1); /* 中间状态为完整高度 */
		  }
		  100% {
		    transform: scaleY(0); /* 结束状态为无高度 */
		  }
	}
</style>